<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'

import SiteNotice from '../components/SiteNotice.vue'
import AttackItem from '../components/gun/AttackItem.vue'
import SkillItem from '../components/gun/SkillItem.vue'

import enemydata from '../data/EnemyData.json'
import btdata from '../data/BattleTextData.json'
import elems from '../data/LanguageElementData.json'
import weaponElems from '../data/LanguageWeaponElementData.json'
import attrs from '../data/attrs.json'

import { store } from '../store/store.js'
import { getText, getParsedText } from '../store/txtstore.js'
import jsonToMap from '../j2m.js'
import { getSkill } from '../components/gun/skill.js'

import '../assets/property.css'
import '../components/gun/skill.css'
import '../assets/elem.css'

const btData = jsonToMap(btdata.data)
const enemy = ref({})
const actives = [7, 10]
const passives = [8, 11]
const lvl = ref(1)
const behaviors = ref([])
const lvAttrs = ref([])
const skills = ref([])

const route = useRoute()
const data = enemydata.data[route.params.uid]
loadData(data)

function loadData(data) {
    let proto;
    if (String(data[1]).startsWith(data[25]) && data[1] - data[25] * 10 < 10) {
        proto = enemydata.data[data[25] * 10 + 1]
    }
    Object.assign(enemy.value, {
        id: data[1],
        name: getText(data[19][1]),
        code: data[24],
        abbr: getText(data[52][1]),
        intro: getParsedText(data[22][1]),
        behavior: Array.isArray(data[23]) ? data[23] : [data[23]],
        attack: getSkill(data[6]),
        activeList: [],
        passiveList: [],
        vulnWeaponElem: getWeaponElems(proto?.[59] || data[59]),
        vulnElem: proto?.[50] ? proto[50].split(',') : data[50]?.split(','),
        attrId: data[17]
    })
    for (const aid of actives) {
        if (Array.isArray(data[aid])) {
            enemy.value.activeList.push(...data[aid])
        } else if (data[aid]) {
            enemy.value.activeList.push(data[aid])
        }
    }
    for (const pid of passives) {
        if (Array.isArray(data[pid])) {
            enemy.value.passiveList.push(...data[pid])
        } else if (data[pid]) {
            enemy.value.passiveList.push(data[pid])
        }
    }

    for (const b of enemy.value.behavior) {
        const behavior = btData.get(b)
        behaviors.value.push([behavior[2][1], behavior[3][1]])
    }

    const base = enemy.value.attrId * 1e3
    for (let lv = 1; lv < 1e3; lv++) {
        const lvAttr = store.properties.get(base + lv)
        if (lvAttr) {
            delete lvAttr[1]
            lvAttrs.value.push(Object.entries(lvAttr))
        } else {
            break
        }
    }

    if (enemy.value.activeList.length) {
        appendSkills(enemy.value.activeList)
    }
    if (enemy.value.passiveList.length) {
        appendSkills(enemy.value.passiveList)
    }
}

function appendSkills(sids) {
    for (const sid of sids) {
        const skill = getSkill(sid)
        if (skill) {
            skills.value.push(new Map([
                [0, [skill]]
            ]))
        }
    }
}

function ps(pair) {
    if (pair[0] == 7) {
        return pair[1] / 100
    } else if (pair[0] < 9) {
        return pair[1]
    }
    return pair[1] / 10 + '%'
}

function getWeaponElems(vulnCode) {
    const vulns = []
    for (const key of Object.keys(weaponElems)) {
        if (vulnCode & key) {
            vulns.push(key)
        }
    }
    return vulns
}
</script>

<template>
    <SiteNotice/>
    <main>
        <h1>{{ enemy.name }}</h1>
        <img :src="`/exilium/icons/monster/Monster_Head_${enemy.code}.png`">
        <p>{{ enemy.intro }}</p>
        <ul>
            <li v-for="vuln of enemy.vulnWeaponElem" :class="['weapon-elem', 'weapon-elem-' + vuln]">{{ weaponElems[vuln] }}</li>
            <li v-for="vuln of enemy.vulnElem" :class="['elem', 'elem-' + vuln]">{{ elems[vuln] }}</li>
        </ul>
        <section v-if="enemy.behavior">
            <h2>战斗特征</h2>
            <dl>
                <template v-for="b of behaviors">
                    <dt>{{ getParsedText(b[0]) }}</dt>
                    <dd>{{ getParsedText(b[1]) }}</dd>
                </template>
            </dl>
        </section>
        <section>
            <h2>属性</h2>
            <div>
                <label>等级：<input type="number" v-model="lvl" min="1" :max="lvAttrs.length"></label>
            </div>
            <input type="range" v-model="lvl" min="1" :max="lvAttrs.length">
            <table>
                <template v-for="attr of lvAttrs[lvl - 1]">
                    <tr v-if="attrs[attr[0]]">
                        <td :class="'attr-' + attr[0]">{{ attrs[attr[0]] }}</td>
                        <td>{{ ps(attr) }}</td>
                    </tr>
                </template>
            </table>
        </section>
        <section>
            <h2>技能</h2>
            <AttackItem v-if="enemy.attack" :data="enemy.attack" />
            <SkillItem v-for="skill of skills" :data="skill" />
        </section>
    </main>
</template>

<style scoped>
ul {
    column-gap: 1em;
    display: flex;
    justify-content: start;
    list-style: none;
    margin-top: 1em;
    padding: 0
}

ul::before {
    content: '弱点';
    font-weight: bold;
}

section {
    margin-top: 1em;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 1em;
}

table {
    background: #556167;
    border-radius: 0.25em;
    box-shadow: 0 2px 4px #556167;
    color: white;
}

td:first-child {
    padding-left: 1.5em;
}
</style>